<template>
  <div style="display: inline-block">
    <Button @click="insert" size="small">插入图片</Button>
    <Modal
      v-model="showModal"
      title="请选择"
      @on-ok="insertImgFile"
      @on-cancel="showModal = false,imgFile = null "
    >
      <Upload :before-upload="handleUpload" action="#">
        <Button icon="ios-cloud-upload-outline">选择图片文件</Button>
      </Upload>
      <img class="uploadImg" :src="imgFile" />
    </Modal>
  </div>
</template>

<script>
import select from '@/mixins/select'
import { getImgStr } from "@/utils/utils";
import { v4 as uuid } from 'uuid';
export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      showModal: false,
      imgFile: null,
    };
  },
  methods: {
    insert() {
      this.imgFile = ''
      this.showModal = true
    },
    insertImgFile() {
      const imgEl = document.createElement('img');
      imgEl.src = this.imgFile
      // 插入页面
      // document.body.appendChild(imgEl);
      imgEl.onload = () => {
        // 创建图片对象
        const imgInstance = new this.fabric.Image(imgEl, {
          id: uuid(),
          name: '图片1',
          left: 100, top: 100,
        });
        // 设置缩放
        imgInstance.scale(0.2);
        this.canvas.c.add(imgInstance)
        this.canvas.c.setActiveObject(imgInstance);
        this.canvas.c.renderAll()
        // 删除页面中的图片元素
        imgEl.remove()
      }
    },
    // 选择文件
    handleUpload(file) {
      console.log(file.type)
      if(file.type == "image/png" || file.type == "image/jpeg" || file.type == "image/jpg") {
        getImgStr(file).then(res => {
          this.imgFile = res
        })
      }else {
        confirm("请上传正确的图片")
      }

	  // return false;
    },
	httpRequest (data) {
		console.log('导入图片')
	}
  }
};
</script>

<style scoped lang="less">
.uploadImg {
  max-height: 200px;
  max-width: 200px;
}
</style>
